<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript" th:src="@{/js/jquery-3.2.1.slim.min.js}" ></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.min.js}" ></script>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">

</head>
<body>

<div id="app">
    <slot-div>
        <slot-title slot="slot-title" :title="title"></slot-title>
        <slot-body slot="slot-body" v-for="(item,index) in items"
                   :item="item" :index="index"
                   @remove="removeItems(index)"></slot-body>
<!--    不能使用大写（remove），只能用小写    -->
    </slot-div>
</div>

<script>

    Vue.component("slot-div",{
        template:
            '<div>' +
            '   <slot name="slot-title"></slot>' +
            '   <ul>' +
            '       <slot name="slot-body"></slot>' +
            '   </ul>' +
            '</div>'
    })

    Vue.component("slot-title",{
        props:['title'],
        template:"<h4>{{title}}</h4>"
    })
    Vue.component("slot-body",{
        props:['item','index'],
        //多加个删除超链接
        template:"<li>{{index}}---{{item}}<a href='#' @click.prevent='removeTo'>删除</a></li>",
        methods:{
            removeTo:function(){
                //触发当前实例上的事件，参数一：事件名（不能有大写字母），参数2：方法名
                this.$emit("remove");
            }
        }
    })
    var vue = new Vue({
        el:"#app",
        data:{
            title:"标题",
            items:['java','web','vue']
        },
        methods:{
            removeItems:function(index){
                //第三个参数是添加值，可变参数
                this.items.splice(index,1);
            }
        }
    })

</script>

</body>
</html>